<template>
  <div class="top-component">
    <div class="skeleton" v-if="props.data.type == ''">
      <img src="../../assets/editor/skeleton-icon.png" class="skeleton-icon" />
      <span class="tips">右侧选择顶部组件模版</span>
    </div>
    <div class="inner" v-if="props.data.type == 'default'">
      <div
        class="main"
        :style="{
        height: props.data.content.mainNavHeight, backgroundColor: props.data.style.mainNavBackColor, backgroundImage: `url(${props.data.content.mainNavBackImage})`, backgroundSize: 'contain',
        backgroundRepeat: 'no-repeat',
      }"
      >
        <div class="main-inner">
          <img v-if="props.data.content.logo.zh !== '' && props.data.content.logo.zh !== null" :src="props.data.content.logo.zh" class="logo" />
          <img v-else-if="props.data.content.logo.en !== '' && props.data.content.logo.en !== null" :src="props.data.content.logo.en" class="logo" />
          <img v-else src="../../assets/editor/top-component-logo.png" class="logo" />
          <ul class="nav">
            <li class="nav-item" :style="{ fontSize: props.data.content.mainNavFontSize, fontWeight: props.data.content.mainNavFontWeight }">首页</li>
            <li
              class="nav-item active"
              :style="{
                color: props.data.style.mainNavFontColor,
                '--main-nav-hover-color': props.data.style.mainNavHoverFontColor, fontSize: props.data.content.mainNavFontSize, fontWeight: props.data.content.mainNavFontWeight
              }"
            >
              走进新爵士
            </li>
            <li
              class="nav-item"
              :style="{
                color: props.data.style.mainNavFontColor,
                '--main-nav-hover-color': props.data.style.mainNavHoverFontColor, fontSize: props.data.content.mainNavFontSize, fontWeight: props.data.content.mainNavFontWeight
              }"
            >
              解决方案
            </li>
            <li
              class="nav-item"
              :style="{
                color: props.data.style.mainNavFontColor,
                '--main-nav-hover-color': props.data.style.mainNavHoverFontColor, fontSize: props.data.content.mainNavFontSize, fontWeight: props.data.content.mainNavFontWeight
              }"
            >
              新闻资讯
            </li>
            <li
              class="nav-item"
              :style="{
                color: props.data.style.mainNavFontColor,
                '--main-nav-hover-color': props.data.style.mainNavHoverFontColor, fontSize: props.data.content.mainNavFontSize, fontWeight: props.data.content.mainNavFontWeight
              }"
            >
              联系我们
            </li>
          </ul>
          <div class="change-lang">
            <span>EN</span>
            <div class="divider"></div>
            <span class="active">中文</span>
          </div>
        </div>
      </div>
      <div
        class="sub-menu"
        :style="{
        height: props.data.content.secondaryNavSize.height, backgroundColor: props.data.style.secondaryNavBackColor, width: props.data.content.secondaryNavSize.width, backgroundImage: `url(${props.data.content.secondaryNavBackImage})`, backgroundSize: 'contain',
        backgroundRepeat: 'no-repeat',
      }"
      >
        <div class="sub-menu-inner">
          <span
            class="active"
            :style="{
              color: props.data.style.secondaryNavFontColor,
              '--secondary-nav-hover-color': props.data.style.secondaryNavHoverFontColor, fontSize: props.data.content.secondaryNavFontSize, fontWeight: props.data.content.secondaryNavFontWeight
            }"
            >公司介绍</span
          >
          <span
            :style="{
              color: props.data.style.secondaryNavFontColor,
              '--secondary-nav-hover-color': props.data.style.secondaryNavHoverFontColor, fontSize: props.data.content.secondaryNavFontSize, fontWeight: props.data.content.secondaryNavFontWeight
            }"
            >企业文化</span
          >
          <span
            :style="{
              color: props.data.style.secondaryNavFontColor,
              '--secondary-nav-hover-color': props.data.style.secondaryNavHoverFontColor, fontSize: props.data.content.secondaryNavFontSize, fontWeight: props.data.content.secondaryNavFontWeight
            }"
            >发展历程</span
          >
          <span
            :style="{
              color: props.data.style.secondaryNavFontColor,
              '--secondary-nav-hover-color': props.data.style.secondaryNavHoverFontColor, fontSize: props.data.content.secondaryNavFontSize, fontWeight: props.data.content.secondaryNavFontWeight
            }"
            >资质荣誉</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TopComponent'
}
</script>

<script setup name="TopComponent">
import { computed } from 'vue'
const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {
        type: '',
        content: {
          mainNavFontSize: '12px', // 主导航文字大小
          mainNavFontWeight: '500',// 主导航文字粗细
          secondaryNavFontSize: '12px', // 次导航文字大小
          secondaryNavFontWeight: '500', // 次导航文字粗细
          mainNavHeight: '55px', // 主导航高度
          secondaryNavSize: {
            width: '100%', // 次导航宽度
            height: '55px' // 次导航高度
          },
          mainNavBackImage: '', // 主导航背景图
          secondaryNavBackImage: '', // 次导航背景图
          logo: {
            zh: '', // 中文Logo
            en: '' // 英文Logo
          }
        },
        style: {
          mainNavFontColor: '#3D3D3D', // 主导航字体颜色
          mainNavHoverFontColor: '#3D3D3D', // 主导航字体颜色（鼠标经过）
          mainNavBackColor: '#3D3D3D', // 主导航背景颜色
          secondaryNavFontColor: '#3D3D3D', // 次导航字体颜色
          secondaryNavHoverFontColor: '#3D3D3D', // 次导航字体颜色
          secondaryNavBackColor: '#3D3D3D', // 次导航背景颜色
        },
        animate: {
          /**
           * 1:顶部悬浮且固定
           * 2:顶部占位且固定
           * 3:顶部悬浮且滚动
           * 4:顶部占位且滚动
           */
          behaviour: '1',
          animateType: ''
        }
      };
    }
  }
});

const mainStyleObject = computed(() => {
  return {
    color: props.data.style.mainNavFontColor,
    '--main-nav-hover-color': props.data.style.mainNavHoverFontColor
  }
})

const secondaryStyleObject = computed(() => {
  return {
    color: props.data.style.secondaryNavFontColor,
    '--secondary-nav-hover-color': props.data.style.secondaryNavHoverFontColor
  }
})
</script>

<style lang="scss" scoped>
.top-component {
  width: 100%;

  .skeleton {
    width: 100%;
    height: 110px;
    background-color: #FAFAFA;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .skeleton-icon {
      width: 48px;
      height: 48px;
    }

    .tips {
      color: #A8B0BC;
      font-size: 12px;
    }
  }

  .inner {
    width: 100%;
    // height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;

    .main {
      width: 100%;
      height: 55px;
      background-color: #000000;

      .main-inner {
        width: 776px;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: 0 auto;

        .logo {
          width: 91px;
          height: 23px;
          margin-right: 79px;
        }

        .nav {
          height: 100%;
          list-style: none;
          flex: 1;

          li.nav-item {
            color: #FFFFFF;
            float: left;
            font-size: 12px;
            margin-right: 37px;
            height: 100%;
            padding: 0 8px;
            display: flex;
            flex-direction: row;
            align-items: center;

            &:hover {
              color: var(--main-nav-hover-color);
            }

            &.active {
              background-color: #096AFF;
            }

            &:last-child {
              margin-right: 0;
            }
          }
        }

        .change-lang {
          color: #999999;
          font-size: 12px;
          display: flex;
          flex-direction: row;
          align-items: center;

          .divider {
            height: 10px;
            border-right: 1px solid #999999;
            width: 0;
            margin: 0 4px;
          }

          span {
            &.active {
              color: #FFF;
            }
          }
        }
      }
    }

    .sub-menu {
      height: 55px;
      background-color: #FFF;
      border-bottom: 1px solid #F1F1F1;

      .sub-menu-inner {
        width: 776px;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: 0 auto;
        padding-left: 218px;

        span {
          font-size: 12px;
          color: #999999;
          margin-right: 45px;
          font-weight: 500;

          &:hover {
            color: var(--secondary-nav-hover-color);
          }

          &.active {
            color: #212C39;
          }
        }
      }
    }
  }
}
</style>
